import React, { useMemo, useState, useEffect } from 'react';
import { Btn, is_empty, show_mt, reload_col, ColView, useHigh, GridTable, loc_str, FindBarBase, useCmd, WaitUmd,
    filter_row, d_sort, MainView, cline, loc, uJob } from 'sui';
import { get_init } from 'trace/cmd';
import { show_val } from 'buy/task/cmd';
import { utc_offset } from 'cache';
import { load_wsn } from './cmd';

const GrindView = () => {
    const [main, setMain] = useState();
    const [map_wsn, mapWsn] = useState();
    const [col, setCol] = useState();
    const [opt_find, optFind] = useState();
    const umd = useCmd(null, "trace");
    const [high] = useHigh(190, 100);

    useEffect(() => {
        load_wsn(mapWsn);
        get_init(optFind);
        reload_col(null, v => setCol(v), "grind");
    }, []);

    const getRow = useMemo(() => {
        if (is_empty(main) || is_empty(col)) {
            return null;
        }

        const lst = col.map(d => d.sn);

        return filter_row(main, lst, umd.filter);
    }, [main, umd.filter, col]);

    const getCol = useMemo(() => {
        if (is_empty(col)) {
            return null;
        }

        const tmp = [
            {name: loc("l_193"), key: 'index', width: 70, frozen: true},
        ];

        col.forEach(d => {
            if (d.sn === "name") {
                tmp.push({name: d.name, key: d.sn, width: 200, formatter: (props) => show_val(props, "wsn", map_wsn)});
            }
            else {
                show_mt(tmp, d, 150);
            }
        });

        return tmp;
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [col]);

    const hreturn = () => {
        reload_col(null, v => setCol(v), "grind");
        umd.hreturn();
    };

    if (umd.isFin("col")) {
        const list = [
            {sn: "grind", name: loc("l_153")},
        ];

        return <ColView hreturn={hreturn} title={loc("l_153")} subtitle={loc("l_221")} list={list} cur="grind"/>;
    }

    const hfind = (value) => {
        if (!value["time"]) {
            alert(loc("l_307"));
            return;
        }

        const utc = utc_offset();

        const opt = [
            {ge: "time", v: loc_str(value["t_start"]), utc: utc},
            {le: "time", v: loc_str(value["t_end"]), utc: utc},
            {eq: "line", v: cline()},
        ];

        umd.startWait();

        uJob(umd.endWait, "work/grind",
            {
                line: cline(),
                opt: opt,
            },
            r => {
                d_sort(r, "wsn");

                r.forEach((d, i) => d["index"] = i + 1);

                setMain(r);
            },
            e => setMain(null));
    };

    const hclear = () => get_init(optFind);

    const ctl = {
        ctl: [
            {sn: "time", name: loc("l_308"), ctl: "IkFindDate", start: "t_start", end: "t_end"},
        ]
    };

    const Right = () => <Btn hcmd={() => umd.pact(null, null, "col")}>{loc("l_221")}</Btn>;

    return (
        <MainView>
            <FindBarBase left={loc("l_151")} right={<Right/>} hcmd={hfind} data={ctl} hclear={hclear} cur={opt_find} hfilter={umd.setFilter}/>
            <GridTable col={getCol} row={getRow} high={high}/>
            <WaitUmd umd={umd}/>
        </MainView>
    );
};

export {GrindView};
